<template>
	<div class="page_user user_info" id="user_info">
		<!-- 个人资料 -->
		<div class="div_info">
			<p class="div_title"> 个人信息 </p>
			<div class="content_msg">
				<el-form
				label-position="left"
            :model="form"
            label-width="120px"
            class="form"
            ref="ruleFormRef"
            :rules="rules"
			:disabled='disabledFlag'
          >
            <el-form-item label="用户名" prop="username">
              <el-input type="text" v-model="form.username" placeholder="账号" autocomplete='new-password'>
              </el-input>
            </el-form-item>

            <!-- <el-form-item label="密码" prop="password">
              <el-input
			  type="text"
                v-model="form.password"
                placeholder="5 到 16 个字符"
                show-password
				autocomplete='new-password'>
              >
              </el-input>
            </el-form-item> -->
			<el-form-item label="邮箱" prop="email">
              <el-input
                type="email"
                v-model="form.email"
               
              >
              </el-input>
            </el-form-item>
            <el-form-item label="联系方式" prop="phone">
              <el-input type="tel" v-model="form.phone">
              </el-input>
            </el-form-item>
			<!-- <el-form-item label="其他字段" prop="nickname">
              <el-input type="text" v-model="form.nickname" placeholder="其他字段">
              </el-input>
            </el-form-item> -->
			<el-form-item label="注册时间" prop="create_time">
				<el-text class="mx-1"> {{formatDate(form.create_time)}}</el-text>
            </el-form-item>
			<el-form-item label="上一次登录时间"  prop="login_time">
				<el-text class="mx-1">  {{formatDate(form.login_time)}}</el-text>
            </el-form-item>
			</el-form>
			</div>
			<div class="right_msg">
				<el-button type="danger"  @click="disabledFlag=false" v-if='disabledFlag'>
					<span>编辑</span>
				</el-button>
				<el-button type="success" class="Change_password" @click="submit()" v-else>
					<span>提交</span>
				</el-button>
				
				<!-- -->
				<el-button   @click="router.push('/home')" >
					<span>返回</span>
				</el-button>
			</div>
		</div>		
	</div>
</template>
<script setup>
import { reactive, ref, computed, onMounted } from "vue";
import storageHelper from '@/libs/StorageHelper'
import { paramsFun,$fullUrl,$toTime,$banseUrl,$check_exam,$check_action,formatDate } from '@/utils/utils.js'
let UserInfo = storageHelper.getUserInfo();
let user_id = UserInfo.user_id;
import { useRouter } from "vue-router";
import { $post, $get } from "@/api/Api.js";
let router = useRouter();
 let file=ref(null)
 let source_table=ref(null)
 let source_table_name=ref(null)
 let source_table_check_url=ref( "")
 let source_table_url=ref("")
 let url_get_obj=ref( "/api/user/get_obj?")
 let query=ref({user_id: user_id})
let	display_input=ref("none")
let	display_name=ref( "block")
let	disabledFlag=ref( true)
let	form=ref({
	user_id: 0,
        username: '',
		// nickname: '',
        // password: '',
		// avatar: '',
		// phone: '',
		email: '',
		// user_group: '管理员',
		phone: '',
		 login_time: '',
		 create_time: '',
		//state: 1,
        //   vip_level: '',
        //   vip_discount: 0
})
let ruleFormRef = ref(null);
let rules = ref({
  username: [
    {
      required: true,
      message: "账号不能为空",
      trigger: "blur",
    },
    { min: 5, max: 16, message: "用户名必须是5-16位字符", trigger: "blur" },
  ],
  nickname: [
    {
      required: true,
      message: "昵称不能为空",
      trigger: "blur",
    },
    { min: 2, max: 12, message: "用户名必须是2-12位字符", trigger: "blur" },
  ],

  email: [
    {
		required: true,
      type: "email",
      message: "请输入正确的邮箱地址 例：test@test.com!",
      trigger: ["blur", "change"],
    },
  ],
  phone:[
    {
      required: true,
      message: "联系方式不能为空",
      trigger: 'blur',
    },
  ],
  //邮箱验证码
  // code: [
  //   {
  //     required: true,
  //     message: "验证码不能为空",
  //     trigger: 'blur',
  //   },
  // ],
//   password: [
//     {
// 	  required: true,
//       pattern: /^\S{5,16}$/,
     
//       message: "密码 5 到 16 个字符",
//       trigger: "blur",
//     },
//   ],
//   avatar: [
//     {
//       required: true,
//       message: "请上传头像",
//       trigger: "blur",
//     },
//   ],
 
});
// 输入聚焦
let	focus_input=ref(false)
/**
 * 修改头像
 * @param { Object } files 上传文件对象
 */
let	change_avatar=async(files)=>{
	// let _this = this;
	let form = new FormData();
	form.append("file", files[0]);
	let res = await $post("/api/user/upload", form);
	console.log(res)
	if (res.result) {
		let avatar = res.result.url;
		$post(
			"/api/user/set?user_id=" + user_id, {
				avatar,
			}).then(
			(res) => {
				UserInfo.avatar = avatar;
			});
	} else {
		ElMessage.error(res.error.message);
	}
}

/**
 * 保存修改
 */
let	submit=() =>{
	let {username,email,phone}=form.value;
	let params={
		username,
		email,
		phone,
		user_id,
	}
	$post(
		"/api/user/set?user_id=" + user_id, params).then(
		(res) => {
			disabledFlag.value = true;
			ElMessage.success("保存成功");
			router.push('/home/index')
			UserInfo.nickname = nickname;
		}
	);
}
let	get_obj_before=(params) =>{
		params.user_id = user_id;
		return params
}
let userObj=ref({})
let	 get_user_obj=async()=>{
	let user_group =UserInfo.user_group;
	let jsonString = await $get("/api/user/get_obj?user_id=" + user_id);
	if(jsonString.result && jsonString.result.obj){
		form.value=jsonString.result.obj
		get_obj_after(jsonString)
	}
}
let	 get_obj_after=async(json, func)=>{
	let user_group =UserInfo.user_group;
	let jsonString = await $get("/api/user_group/get_obj?name="+user_group);
	if(json.result && json.result.obj){
		if (jsonString.result.obj.source_table) {
			source_table.value = json.result.obj.source_table
			source_table_name.value = user_group
			source_table_check_url.value = "/"+source_table.value +"/view";
			source_table_url.value = source_table_check_url.value+"?user_id=" +user_id
		}
	}
}
onMounted(()=>{
  get_user_obj()
})

</script>

<style scoped  lang="less">
	.div_info {
		min-height: 500px;
		width:50%;
		margin:20px auto;
		padding:20px;
		border: 2px solid var(--primary_color);
		text-align: left;
		.div_title{
			font-size:28px;
			margin: 30px 0;
			padding-bottom:20px;
		    border-bottom: 2px solid var(--primary_color);
		
		}
	}
    
	.content_msg {
		justify-content: space-between;
		
		margin: 30px 0;
		// border: 1px solid red;
	}

	.figure_avatar {
		padding: 5px;
		height: 60px;
		line-height: 60px;
	}

	.nickname {
		font-size:18px;
		display: flex;
		padding: 5px;
		line-height: 30px;
	}

	.input_nickname .btn_save {
		width: 4rem;
		text-align: center;
		height: 31px;
		line-height: 31px;
		border: 1px solid var(--primary_color);
		border-radius: 5px;
		margin-right: 4px;
	}

	.btn_save:hover {
		background-color: var(--primary_color);
		border: none;
		color: white;
	}

	.right_msg {
		margin: auto;
	}

	.right_msg .change_avatar_box {
		cursor: pointer;
		position: relative;
		display: flex;
		margin-left: 5px;
	}

	.right_wrap {
		margin: 0 10px;
	}

	.right_msg .change_avatar_box #input_file {
		cursor: pointer;
		position: absolute;
		width: 100%;
		height: 100%;
		opacity: 0;
		z-index: 1000;
		font-size: 0;
	}

	.change_nickname_box {
		margin-top: 10px;
		cursor: pointer;
		display: flex;
		margin-left: 5px;
	}
</style>
